<template>
  <div class="governmentDetails-wrap" v-if="detail">
    <div class="details-wrap">
      <!--      <van-image-->
      <!--        class="img"-->
      <!--        :src="`${fileUrl}/${detail?.scenicsInfo?.coverImage}`"-->
      <!--      />-->
      <van-swipe v-if="getImages().length" class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in getImages()" :key="index">
          <van-image
              fit="cover"

              height="30rem"
              width="100%"
              class="img" :src="`${fileUrl}/${item}`" @click="()=>{handelswip(index)}"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="main-header">
      <div class="header-top">
        <!-- <div class="label-wrap">
          <div class="label-content">
            <div class="label">
              <div class="reduction">200减20券</div>
              <span>领</span>
            </div>
          </div>
          <div class="preferential-box">
            10个优惠<img class="icon" :src="CouponIcon" mode="scaleToFill" />
          </div>
        </div> -->
        <div style="height: 8px"></div>
        <span class="title-name">{{ detail.scenicsInfo.scenicAreaName }}</span>
        <div class="address-wrap">
          <div class="unit-box" @click="onNavi">
            <div >
              <img class="icon" :src="AddressIcon" style="width: 20px"/>
            </div>
            <div>{{ detail.scenicsInfo.address }}</div>
          </div>
          <a :href="'tel:' + detail.scenicsInfo.telephone">
            <div class="iconCall">
              <img class="icon" :src="CallIcon" mode="scaleToFill"/></div
            >
          </a>
        </div>
      </div>
      <div class="date-wrap">
        <img class="icon" :src="DateIcon" mode="scaleToFill"/>
        <div class="times">
          <div v-for="(item, index) in detail.scenicSpotTimeSlots" :key="index">
            {{ [...new Set(item.timeHour)].join('到') }}开放时间:
            {{ item.timeSlot.join(',') }}
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="details-wrap">
        <div class="details-title">店铺详情</div>
        <span v-html="detail.scenicsInfo.basicInformation"></span>
      </div>

      <!-- <div @click="handlePay">支付</div> -->
    </div>
    <van-action-sheet
        v-model:show="show"
        :actions="actions"
        @select="(e) => onSelect(e, detail)"
        cancel-text="取消"
        close-on-click-action
    />
  </div>
</template>
<script setup lang="ts">
import AddressIcon from '@/assets/address.png';
import CouponIcon from '@/assets/ic-coupons-count.png';
import CallIcon from '@/assets/call.png';
import DateIcon from '@/assets/date.png';
import {ref, Ref, onMounted} from 'vue';
import api from '@/api/index';
import {useRoute} from 'vue-router';
import {showImagePreview} from "vant";
import {useActionSheet} from "@/hooks/useNavigation.js";
import {callWxNavi, isMiniProgram} from "@/utils/wx-utils.ts";

const route = useRoute();
const detail = ref(null);
const fileUrl = import.meta.env.VITE_FILE_URL;

function __init() {
  console.log('__init');
  api.getDetailInfo({id: route.query.id}).then((res) => {
    if (res.code == '200') {
      detail.value = res.data;
    }
  });
}

onMounted(() => {
  __init();
});

function getImages() {
  return detail.value?.scenicsInfo?.coverImageList;
}

function handelswip(index) {
  showImagePreview({
    images: getImages().map(item => `${fileUrl}/${item}`),
    startPosition: index
  });
}
const {show, actions, navigationClick, onSelect} = useActionSheet()

function onNavi() {
  console.log('onNavi55546546546',detail.value)

  if (isMiniProgram()) {

    callWxNavi({
      lat: Number.parseFloat(detail.value.scenicsInfo.latitude),
      log: Number.parseFloat(detail.value.scenicsInfo.longitude),
      address: detail.value.scenicsInfo.address,
      redirectUrl: location.href,
    });
  } else {
    navigationClick()
  }
}
</script>
<style scoped lang="scss">
.governmentDetails-wrap {
  min-height: 100vh;
  width: 100%;
  background: #fff;
  position: relative;

  .details-wrap {
    height: 180px;
    // background: red;
    .img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .main-header {
    position: absolute;
    top: 25rem;
    min-height: 100px;
    width: 100%;
    background: #fff;
    z-index: 10;
    border-top-right-radius: 18px;
    border-top-left-radius: 18px;

    .header-top {
      padding: 10px;
      box-sizing: border-box;
    }

    .label-wrap {
      display: flex;
      justify-content: space-between;

      .label-content {
        display: flex;

        .label {
          justify-content: center;
          align-items: center;
          // width: 120px;
          height: 20px;
          border: 1px solid rgb(243, 162, 127);
          font-size: 12px;
          padding-left: 10px;
          padding-right: 10px;
          box-sizing: border-box;
          border-radius: 15px;
          display: flex;
          background: rgb(253, 237, 245);
          color: rgb(243, 162, 127);

          .reduction {
            padding-right: 3px;
            box-sizing: border-box;
            border-right: 1px dotted rgb(243, 162, 127);
            margin-right: 3px;
          }
        }
      }
    }

    .preferential-box {
      display: flex;
      align-items: center;
      color: #ccc;

      .icon {
        width: 18px;
        height: 18px;
      }
    }

    .line {
      width: 100%;
      height: 1px;
      background: #eee;
    }

    .title-name {
      margin-top: 5px;
      display: inline-block;
      font-weight: bold;
    }

    .details-wrap {
      padding: 10px;
      box-sizing: border-box;

      .details-title {
        font-weight: bold;
        padding-bottom: 5px;
      }
    }

    // background: rebeccapurple;
  }

  .address-wrap {
    display: flex;
    justify-content: space-between;

    .unit-box {
      margin-top: 5px;
      display: flex;
      align-items: center;
      font-size: 12px;

      .icon {
        width: 18px;
        height: 18px;
      }
    }

    .iconCall {
      width: 28px;
      height: 28px;

      .icon {
        width: 100%;
        height: 100%;
      }
    }
  }

  .date-wrap {
    // margin-top: 10px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 12px;

    .icon {
      width: 18px;
      height: 18px;
    }

    .times {
      flex-direction: column;
    }
  }
}
</style>
